<template>
  <div id="playercontent">
    <div id="dplayer"></div>
    <classTest :videoCurrentTime="videoCurrentTime" :duration="duration" ref="classTest"></classTest>
  </div>
</template>

<script>
import Hls from 'hls.js'
import DPlayer from 'dplayer';
import classTest from "../homepage/course/openclassPlayer/class-test.vue";
export default {
  components: {
    classTest,
  },
  props: {
    options: Object,
    pointData: '',
  },
  data() {
    return {
      qulity: [],
      videoCurrentTime: '',
      duration: '',
      timer: null,
      allTestTime: [],
      needScore: false,
      album_id: this.$route.query.album_id,
    };
  },
  watch: {
    // videoCurrentTime: {
    //   handler(nv, ov) {
    //     console.log(nv, ov)
    //   }, immediate: true
    // }
  },
  metgids: {},
  mounted() {
    // setTimeout(() => {
    //   this.initDPlayer();
    // }, 500)

    this.$nextTick(() => {
      this.initDPlayer();
      // this.needScore =
      //   this.videoOptions.need_score_status === true &&
      //   this.cutid === undefined;
      // if (this.cutid === undefined) {
      //   this.scoreRecord();
      // }
    })
  },

  methods: {
    initDPlayer() {
      this.showQuality();
      const hls = new Hls();
      const dp = {
        container: document.getElementById('dplayer'),
        //播放器的一些参数
        autoplay: true,                                                   //视频自动播放
        theme: '#FADFA3',                                                 //主题色
        loop: false,                                                      //视频循环播放
        lang: 'zh-cn',                                                    //语言
        screenshot: true,                                                 //开启截图，如果开启，视频和视频封面需要允许跨域
        hotkey: true,                                                     //开启热键，支持快进、快退、音量控制、播放暂停
        preload: 'auto',                                                  //视频预加载，可选值: 'none', 'metadata', 'auto'
        // logo: require('logo.png'),                                     //左上角logo
        volume: 0.7,                                                      //默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
        mutex: true,                                                      //互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
        playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2],                      //可选的播放速率，可以设置成自定义的数组
        video: {                                                          //视频信息
          url: this.options.pc_play_url,                                  //视频链接    
          type: 'customHls',                                              //可选值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定义类型, 见#MSE 支持
          customType: {
            customHls: function (video, player) {
              hls.loadSource(video.src);
              hls.attachMedia(video);
            },
          },
          pic: 'dplayer.png',                                             //视频封面
          // thumbnails: 'thumbnails.jpg',                                //视频缩略图，可以使用 DPlayer-thumbnails (opens new window)生成
          quality: this.qulity,
          defaultQuality: 0,
        },
        highlight: this.pointData,                                       //高亮点（打点功能）
      };
      const player = new DPlayer(dp);
      // console.log(player)
      this.getVideoTest(player)

    },
    showQuality() {
      let qualityAll = [                                                     //清晰度
        {
          name: '480P',
          url: this.options['480P'],
          type: 'customHls',
        },
        {
          name: '720P',
          url: this.options['720P'],
          type: 'customHls',
        },
        {
          name: '1080P',
          url: this.options['1080P'],
          type: 'customHls',
        },
        {
          name: '原视频',
          url: this.options.pc_play_url,
          type: 'customHls',
        },]
      if (this.options['1080P']) {
        this.qulity.push(qualityAll[2])
      }
      if (this.options['720P']) {
        this.qulity.push(qualityAll[1])
      }
      if (this.options['480P']) {
        this.qulity.push(qualityAll[0])
      }
      if (this.qulity.length == 0) {
        this.qulity.push(qualityAll[3])
      }

    },
    getVideoTest(player) {
      let _this = this
      _this.allTestTime = _this.$refs.classTest.allTestTime;
      console.log(_this.allTestTime)
      player.video.ontimeupdate = function () {
        _this.videoCurrentTime = player.video.currentTime
        let videoCurrentTime = parseInt(_this.videoCurrentTime);
        console.log(videoCurrentTime, _this.allTestTime.includes(videoCurrentTime))
        if (_this.allTestTime.includes(videoCurrentTime)) {
          player.pause()
          _this.$refs.classTest.dplayerTest(videoCurrentTime)  //执行class-test的测试方法
          _this.allTestTime = _this.$refs.classTest.allTestTime;
          // console.log(_this.allTestTime)
        };
        //遍历所有的测试点
        // this.allTestTime.forEach(function(item,index) {
        //   if(item<this.videoCurrentTime){
        //     console.log('弹窗')
        //   }
        // }
      }
    },
    // scoreRecord() {
    //   //从专辑模块跳到当前页面时
    //   if (this.album_id != undefined) {
    //     this.ablumInterval = setInterval(() => {
    //       let videotime = parseInt(_this.videoCurrentTime);
    //       this.is_complete = this.duration == videotime ? 2 : 1;
    //     }, 1000);
    //   }
    // },
  },

}
</script>
<style scoped>
#dplayer {
  height: 100%;
  width: 100%;
}
</style>